<template>
  <view class="notice">
    <view class="notice-header">
      <text class="notice-title">公告详情页面</text>
    </view>
    <view class="notice-content">
      <text class="notice-id">公告 ID: {{ noticeId }}</text>
      <text class="notice-desc">待开发~~~</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 公告 ID
const noticeId = ref<number>(0)

// 页面加载时获取参数
onLoad((options) => {
  if (options?.id) {
    noticeId.value = Number(options.id)
    console.log('公告 ID:', noticeId.value)
  }
})
</script>

<style lang="scss" scoped>
.notice {
  padding: 40rpx;

  .notice-header {
    margin-bottom: 40rpx;

    .notice-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .notice-content {
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .notice-id {
      font-size: 28rpx;
      color: #4a7cfa;
      font-weight: 500;
    }

    .notice-desc {
      font-size: 26rpx;
      color: #999;
    }
  }
}
</style>
